SharePoint Framework (SPFx) একটি মডার্ন JavaScript ভিত্তিক ফ্রেমওয়ার্ক যা ব্যবহার করে SharePoint এর জন্য কাস্টম ওয়েব পার্ট, এক্সটেনশন এবং অন্যান্য ফিচার ডেভেলপ করা যায়। SPFx ডেভেলপমেন্ট করার জন্য আপনাকে কিছু টুল এবং পরিবেশ সেটআপ করতে হবে। এই টিউটোরিয়ালে আমরা আলোচনা করব কিভাবে Visual Studio Code (VS Code) এবং SPFx ডেভেলপমেন্ট পরিবেশ সেটআপ করতে হয়।
Visual Studio Code (VS Code) ইনস্টলেশন
Visual Studio Code কী?
Visual Studio Code (VS Code) একটি শক্তিশালী এবং লাইটওয়েট সোর্স কোড এডিটর, যা প্রধানত ওয়েব ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। এটি বিভিন্ন প্লাগইন সমর্থন করে, যেগুলি SPFx ডেভেলপমেন্টে খুবই কার্যকরী।
VS Code ইনস্টলেশন প্রক্রিয়া
- VS Code ডাউনলোড করুন: VS Code অফিসিয়াল ওয়েবসাইট থেকে আপনার অপারেটিং সিস্টেম অনুযায়ী সংস্করণ ডাউনলোড করুন।
- ইন্সটলেশন শুরু করুন: ডাউনলোড করার পর, ইন্সটলেশন ফাইল রান করুন এবং নির্দেশনা অনুযায়ী ইন্সটল করুন।
- ইন্সটলেশনের পর কনফিগারেশন: ইন্সটল হওয়ার পর VS Code ওপেন করুন এবং প্রথমে কিছু গুরুত্বপূর্ণ এক্সটেনশন ইনস্টল করুন, যেমন:
- ESLint: কোডের স্টাইল এবং গুণগত মান বজায় রাখতে।
- Prettier: কোড অটোফরম্যাটিংয়ের জন্য।
- SPFx Extensions: SPFx ডেভেলপমেন্টে ব্যবহৃত কিছু নির্দিষ্ট এক্সটেনশন।
SPFx Development Environment Setup
SPFx ডেভেলপমেন্ট করার জন্য কিছু টুলস এবং সফটওয়্যার ইনস্টল করতে হবে, যেমন Node.js, Yeoman এবং Gulp। এগুলি SPFx অ্যাপ্লিকেশন তৈরি এবং বিল্ড করার জন্য প্রয়োজনীয় টুলস।
স্টেপ ১: Node.js ইনস্টল করা
SPFx ডেভেলপমেন্টের জন্য Node.js প্রয়োজন, যেহেতু SPFx JavaScript ভিত্তিক।
- Node.js ডাউনলোড করুন: Node.js ওয়েবসাইট থেকে লেটেস্ট স্টেবল ভার্সন ডাউনলোড করুন।
- ইন্সটলেশন: Node.js ইনস্টল করার সময়, "Install npm" অপশনটি সিলেক্ট করুন।
- ইন্সটলেশন পরীক্ষা করুন: ইনস্টল হওয়ার পর, কমান্ড প্রম্পট বা টার্মিনাল এ গিয়ে
node -vএবংnpm -vকমান্ড দিয়ে নিশ্চিত করুন যে Node.js এবং npm সঠিকভাবে ইনস্টল হয়েছে।
স্টেপ ২: Yeoman এবং SharePoint Framework Generator ইনস্টল করা
Yeoman হলো একটি স্ক্যাফোল্ডিং টুল, যা SPFx প্রজেক্ট স্ক্যাফোল্ড করার জন্য ব্যবহার করা হয়। এছাড়া, SharePoint Framework Generator SPFx প্রজেক্ট তৈরি করতে সহায়তা করে।
Yeoman ইনস্টল করা: কমান্ড প্রম্পট বা টার্মিনাল এ গিয়ে নিচের কমান্ডটি রান করুন:
npm install -g yoSharePoint Framework Generator ইনস্টল করা: Yeoman ইনস্টল হওয়ার পর, SharePoint Framework Generator ইনস্টল করতে নিচের কমান্ডটি রান করুন:
npm install -g @microsoft/generator-sharepoint
স্টেপ ৩: Gulp ইনস্টল করা
Gulp একটি টাস্ক রানার, যা SPFx প্রজেক্টের বিল্ড, লোড এবং ডেভেলপমেন্ট সার্ভার চালাতে ব্যবহৃত হয়।
Gulp ইনস্টল করা: Gulp ইনস্টল করতে নিচের কমান্ডটি রান করুন:
npm install -g gulp
স্টেপ ৪: SPFx প্রজেক্ট তৈরি করা
প্রজেক্ট ডিরেক্টরি তৈরি করুন: নতুন SPFx প্রজেক্ট তৈরি করার জন্য একটি নতুন ফোল্ডার তৈরি করুন এবং সেই ফোল্ডারে নেভিগেট করুন।
mkdir spfx-project cd spfx-projectYeoman Generator চালান: SPFx প্রজেক্ট স্ক্যাফোল্ড করতে Yeoman Generator চালান:
yo @microsoft/sharepointএই কমান্ডটি আপনাকে কিছু কনফিগারেশন অপশন প্রদান করবে, যেমন:
- প্রজেক্টের নাম
- ওয়েব পার্ট অথবা এক্সটেনশন তৈরি করার সিদ্ধান্ত
- JavaScript অথবা TypeScript ব্যবহার করার অপশন
ডেভেলপমেন্ট সার্ভার চালানো: প্রজেক্ট তৈরি হয়ে গেলে, আপনার ডেভেলপমেন্ট পরিবেশ পরীক্ষা করতে gulp serve কমান্ড চালিয়ে লোকাল ডেভেলপমেন্ট সার্ভার শুরু করুন:
gulp serve
SPFx Development Environment Testing
Local Workbench
Local Workbench হলো একটি স্থানীয় ডেভেলপমেন্ট পরিবেশ যা আপনাকে SharePoint এর ভিতরে কোডটি টেস্ট করার আগে একে প্রিভিউ এবং টেস্ট করতে সাহায্য করে। gulp serve চালানোর পর, আপনাকে একটি URL প্রদান করা হবে (সাধারণত https://localhost:4321), যা আপনি আপনার ব্রাউজারে দেখতে পারবেন।
SharePoint Workbench
আপনি যদি প্রকৃত SharePoint সাইটে আপনার ডেভেলপমেন্ট টেস্ট করতে চান, তবে SharePoint Workbench ব্যবহার করতে পারেন, যা SharePoint সাইটে লাইভ প্রিভিউ দেখতে দেয়। Workbench এ আপনার পরিবর্তনগুলি পরীক্ষা করতে আপনি SharePoint সাইটে লগ ইন করে /_catalogs/instance/SPFx/WorkBench.aspx URL এ নেভিগেট করতে পারবেন।
SPFx Development Tools
SPFx ডেভেলপমেন্টের জন্য কিছু অন্যান্য টুলসও ব্যবহার করা যেতে পারে, যেমন:
- SPFx DevTools: SPFx কোড ডিবাগ করার জন্য DevTools এর জন্য একটি প্লাগইন।
- SPFx Yeoman Generator Options: Yeoman Generator এর মাধ্যমে আরও বিভিন্ন কাস্টমাইজড অপশন পাওয়া যায়।
এই স্টেপগুলির মাধ্যমে আপনি Visual Studio Code এবং SPFx Development Environment সঠিকভাবে সেটআপ করতে পারবেন এবং SPFx এর উপর কাজ শুরু করতে পারবেন।
Read more
